import { defineStore } from 'pinia'
import { ref } from 'vue'

export const useAppStore = defineStore('app', () => {
  // 侧边栏状态
  const sidebarCollapsed = ref(false)
  
  // 主题模式
  const isDark = ref(false)
  
  // 语言设置
  const language = ref('zh-CN')
  
  // 页面加载状态
  const pageLoading = ref(false)
  
  // 面包屑导航
  const breadcrumbs = ref([])
  
  // 标签页
  const tabs = ref([
    {
      name: 'Dashboard',
      title: '仪表板',
      path: '/dashboard',
      closable: false
    }
  ])
  const activeTab = ref('Dashboard')
  
  // 设备类型
  const device = ref('desktop') // desktop, tablet, mobile
  
  // 切换侧边栏
  const toggleSidebar = () => {
    sidebarCollapsed.value = !sidebarCollapsed.value
    localStorage.setItem('sidebarCollapsed', sidebarCollapsed.value)
  }
  
  // 设置侧边栏状态
  const setSidebarCollapsed = (collapsed) => {
    sidebarCollapsed.value = collapsed
    localStorage.setItem('sidebarCollapsed', collapsed)
  }
  
  // 切换主题
  const toggleTheme = () => {
    isDark.value = !isDark.value
    localStorage.setItem('theme', isDark.value ? 'dark' : 'light')
    
    // 更新HTML类名
    if (isDark.value) {
      document.documentElement.classList.add('dark')
    } else {
      document.documentElement.classList.remove('dark')
    }
  }
  
  // 设置主题
  const setTheme = (theme) => {
    isDark.value = theme === 'dark'
    localStorage.setItem('theme', theme)
    
    if (isDark.value) {
      document.documentElement.classList.add('dark')
    } else {
      document.documentElement.classList.remove('dark')
    }
  }
  
  // 设置语言
  const setLanguage = (lang) => {
    language.value = lang
    localStorage.setItem('language', lang)
  }
  
  // 设置页面加载状态
  const setPageLoading = (loading) => {
    pageLoading.value = loading
  }
  
  // 设置面包屑
  const setBreadcrumbs = (crumbs) => {
    breadcrumbs.value = crumbs
  }
  
  // 添加标签页
  const addTab = (tab) => {
    const existingTab = tabs.value.find(t => t.name === tab.name)
    if (!existingTab) {
      tabs.value.push({
        ...tab,
        closable: tab.closable !== false
      })
    }
    activeTab.value = tab.name
  }
  
  // 移除标签页
  const removeTab = (tabName) => {
    const index = tabs.value.findIndex(t => t.name === tabName)
    if (index > -1 && tabs.value[index].closable) {
      tabs.value.splice(index, 1)
      
      // 如果移除的是当前活跃标签，切换到前一个标签
      if (activeTab.value === tabName) {
        const newIndex = Math.max(0, index - 1)
        activeTab.value = tabs.value[newIndex]?.name || 'Dashboard'
      }
    }
  }
  
  // 设置活跃标签
  const setActiveTab = (tabName) => {
    activeTab.value = tabName
  }
  
  // 关闭其他标签页
  const closeOtherTabs = (tabName) => {
    tabs.value = tabs.value.filter(t => !t.closable || t.name === tabName)
    activeTab.value = tabName
  }
  
  // 关闭所有标签页
  const closeAllTabs = () => {
    tabs.value = tabs.value.filter(t => !t.closable)
    activeTab.value = tabs.value[0]?.name || 'Dashboard'
  }
  
  // 设置设备类型
  const setDevice = (deviceType) => {
    device.value = deviceType
    
    // 移动设备自动收起侧边栏
    if (deviceType === 'mobile') {
      setSidebarCollapsed(true)
    }
  }
  
  // 初始化应用
  const initApp = () => {
    // 恢复侧边栏状态
    const savedSidebarState = localStorage.getItem('sidebarCollapsed')
    if (savedSidebarState !== null) {
      sidebarCollapsed.value = savedSidebarState === 'true'
    }
    
    // 恢复主题设置
    const savedTheme = localStorage.getItem('theme')
    if (savedTheme) {
      setTheme(savedTheme)
    }
    
    // 恢复语言设置
    const savedLanguage = localStorage.getItem('language')
    if (savedLanguage) {
      language.value = savedLanguage
    }
    
    // 检测设备类型
    const checkDevice = () => {
      const width = window.innerWidth
      if (width < 768) {
        setDevice('mobile')
      } else if (width < 1024) {
        setDevice('tablet')
      } else {
        setDevice('desktop')
      }
    }
    
    checkDevice()
    window.addEventListener('resize', checkDevice)
  }
  
  return {
    // 状态
    sidebarCollapsed,
    isDark,
    language,
    pageLoading,
    breadcrumbs,
    tabs,
    activeTab,
    device,
    
    // 方法
    toggleSidebar,
    setSidebarCollapsed,
    toggleTheme,
    setTheme,
    setLanguage,
    setPageLoading,
    setBreadcrumbs,
    addTab,
    removeTab,
    setActiveTab,
    closeOtherTabs,
    closeAllTabs,
    setDevice,
    initApp
  }
})